<template>
  <el-card>
    <el-button @click="$router.push('/role/add')" type="primary" icon="el-icon-circle-plus-outline"
      >新增</el-button
    >
    <el-divider></el-divider>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="rolename" label="角色名称" width="180"> </el-table-column>
      <el-table-column prop="status" label="状态"> 
          <template v-slot="scope">
                <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
                <el-tag type="danger" v-else>禁用</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="操作"> 
          <!-- ??? /role'+scope.row.id-->
          <template v-slot="scope">
            <el-button @click="$router.push('/role/edit/'+scope.row.id)" type="success" icon="el-icon-edit" circle size="mini"></el-button>
            <el-button @click="del(scope.row.id)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
          </template>
      </el-table-column>
    </el-table>
  </el-card>
</template> 

<script>
import {getRoleList} from '../../request/role'
export default {
  data() {
    return {
      list: [],
    };
  },
//   el和data加载完成
  async created(){
    this.getRoleList()
  },
  // methods写错它里面的方法怎么能是一个函数呢？？
  methods:{
  async  getRoleList(){
      const list=await getRoleList();
      if(list){
          this.list=list
      }
    },
      del(id){
            this.$confirm(async ()=>{
              const res=await this.$http.post('/api/roledelete',{id})
              if(res.code===200){
                // const index=this.list.findIndex(item=>item.id===id)
                // this.list.splice(index,1)
                this.$success('删除成功')
                this.getRoleList()
              }
            })
      }
  },
 
};
</script>

<style>
</style>